<template>
  <div>
    <div class="coin-content">
      <div class="icon coin"></div>
      <div class="val">
        <div class="text-line">玩家XXXX在赢财神中获得超级大奖</div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['icon'])
</script>

<style lang="scss" scoped>
.coin-content {
  height: 2.8rem;
  width: auto;
  display: flex;
  align-items: center;
  margin: 2rem;

  .icon {
    height: 2.8rem;
    position: relative;
    z-index: 3;
    flex: 0 0 2.8rem;

    &.coin {
      background: url('/src/assets/icon/Icon_laba.png');
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
  
  .val {
    flex: 1;
    height: 2rem;
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 2rem;
    margin-left: -1rem;
    position: relative;
    background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.4));
    border-radius: 0 2.8rem 2.8rem 0;

    .text-line {
      display: inline-block;
      text-indent: 1.5rem;
    }
  }
}
</style>